<template>
  <base-dialog
    title="修改"
    ref="baseDialog"
    @handleClose="handleClose"
    @handleSubmit="handleSubmit"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="字典名称" prop="dicName">
        <el-input v-model="form.dicName" maxlength="20" show-word-limit />
      </el-form-item>
      <el-form-item label="字典编码" prop="dicCode">
        <el-input v-model="form.dicCode" disabled maxlength="20" show-word-limit />
      </el-form-item>
      <!--      <el-form-item label="字典标签" prop="label">-->
      <!--        <el-input v-model="form.label" maxlength="20" show-word-limit />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="值" prop="value">-->
      <!--        <el-input v-model="form.value" class="inputValue" maxlength="20" show-word-limit />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="字典排序" prop="orderNo">-->
      <!--        <el-input-number-->
      <!--          v-model="form.orderNo"-->
      <!--          class="inputValue"-->
      <!--          controls-position="right"-->
      <!--          :min="0"-->
      <!--          :max="999"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <el-form-item label="备注">
        <el-input
          v-model="form.remark"
          type="textarea"
          :rows="4"
          :autosize="{ minRows: 2, maxRows: 12 }"
          placeholder="请输入内容"
          maxlength="200"
          show-word-limit
        />
      </el-form-item>
    </el-form>
  </base-dialog>
</template>

<script>
import { edit } from "@/api/system/dic"

export default {
  name: "updateDialog",
  data() {
    return {
      form: {},
      rules: {
        dicName: [
          { required: true, message: "请输入字典名称", trigger: "blur" },
          { min: 1, max: 20, message: "长度请小于20个字符", trigger: "change" }
        ],
        dicCode: [
          { required: true, message: "请输入字典编码", trigger: "blur" },
          { min: 1, max: 20, message: "长度请小于20个字符", trigger: "change" }
        ],
        label: [
          { required: true, message: "请输入字典标签", trigger: "blur" },
          { min: 1, max: 20, message: "长度小于20个字符", trigger: "change" }
        ],
        value: [{ required: true, message: "值不能为空", trigger: "blur" }],

        orderNo: [{ required: true, message: "排序不能为空", trigger: "blur" }]
      }
    }
  },
  methods: {
    init(scope) {
      this.$refs.baseDialog.dialogVisible = true
      this.form = scope
    },
    handleClose() {
      this.$refs.baseDialog.dialogVisible = false
      this.form = {}
    },

    // 提交表单
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          edit(this.form).then(() => {
            this.$message({
              message: "编辑成功",
              type: "success"
            })
            this.$emit("updatePage")
            this.handleClose()
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form {
  overflow: hidden;
  margin-bottom: 30px;
}

.inputValue {
  width: 100%;
}
</style>
